import React,{useEffect,useState} from 'react'
import '../../assets/OrderDetail/index.less'
import { orderInfo } from '@/api'

function index(props:any) {
	let [detailItem,setdetailItem] = useState<any>({}) //props.location.state//动态路由传递过来的对应的数据
	// console.log(props.location.state.id)
	let [totalPrice,settotalPrice]= useState(0)//最终价格
	
	useEffect(()=>{
		orderInfo({
			order_id:props.location.state.id
		}).then((res:any)=>{
			setdetailItem(detailItem=res)
			// console.log(detailItem)
		})
		settotalPrice(totalPrice=detailItem.totalprice+detailItem.freight-detailItem.gift)//计算最终价格
	},[])
	return (
			<div className='OrderDetail'>
					<div className='OrderDetail_img'>
							<img src={require('../../assets/age.png')}/>
							<p className='OrderDetail_p'>
									<span>{detailItem.name}</span>
									<span>{detailItem.detail}</span>
							</p>
					</div>
					<div className='OrderDetail_main'>
							<div className='OrderDetail_main_one'>
									<p>
											<span>订单编号:</span><a>{detailItem.order_no}</a>
									</p>
									<p>
											<span>下单时间:</span> <a>{detailItem.createtime}</a>
									</p>
							</div>
							<div className='OrderDetail_main_two'>
									<p>
											<span>支付方式:</span> <a>{detailItem.pay_way}</a>
									</p>
									<p>
											<span>支付时间:</span><a>{detailItem.updatetime}</a> 
									</p>
							</div>
							<div className='OrderDetail_main_three'>
									<p>
											<span>配送方式:</span> <a>{detailItem.distribution}</a> 
									</p>
									<p>
											<span>配送时间:</span><a>{detailItem.deliverytime}</a> 
									</p>
							</div>
							
							
							
							

							
					</div>
					<div className='OrderDetail_main_price'>
							<p className='left_right'>
									<span>商品总额</span><span className='left_right_span'>{detailItem.price}</span>
							</p>
							<p className='left_right'>
									<span>运费</span> <span className='left_right_span'>+ ¥{detailItem.freight}</span> 
							</p>
							<p className='left_right'>
								<span>支付有礼</span><span className='left_right_span'>- ¥{detailItem.gift}</span> 
							</p>
							<p className='price'>实付款：<b>¥{totalPrice}</b></p>
					</div>
			</div>
	)
}

export default index
